extends layout

block content
	.detail-page
		//h1= title
		img.logo(src='/images/logo.png')
		button.get-qr-button SAVE IMAGE
		canvas#mainImage
		.bg-image.city
		.bg-image.beach
		.bg-image.mountains
		.qr-modal
			.header
				h2.title Please Scan the QR Code to View Your Results
				span.close-modal#closeModal &#x2715;
			.body#qrModalBody
		script(src='/javascripts/jquery.min.js')
		script.
			console.log('inline script is loaded');
			//build the original canvas
			var img = new Image();
			img.onload = function(){
				var canvas = document.getElementById('mainImage');
				var ctx = canvas.getContext('2d');
				canvas.width = 1200;
				canvas.height = 675;
				ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, 1200, 675)

				//get image data and store in array
				var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
				var data = imageData.data;

				//convert image data to xyz values
				//var xyzImageData = rgbToXyz(red, green, blue)
				var start = [data[0], data[1], data[2]];
				console.log(start);
				
				//function to convert one point of data from rgb to xyz
				var rgbToXyz = function(pixelDataArray){
					var temp_r = parseFloat(pixelDataArray[0] / 255);
					var temp_g = parseFloat(pixelDataArray[1] / 255);
					var temp_b = parseFloat(pixelDataArray[2] / 255);

					if (temp_r > 0.04045) {
						temp_r = Math.pow(( (temp_r + 0.055 ) / 1.055 ), 2.4)
					} else {
						temp_r = temp_r / 12.92
					}
					if (temp_g > 0.04045) {
						temp_g = Math.pow(( (temp_g + 0.055 ) / 1.055 ), 2.4)
					} else {
						temp_g = temp_g / 12.92
					}
					if (temp_b > 0.04045) {
						temp_b = Math.pow(( (temp_b + 0.055 ) / 1.055 ), 2.4)
					} else {
						temp_b = temp_b / 12.92
					}

					temp_r = temp_r * 100;
					temp_g = temp_g * 100;
					temp_b = temp_b * 100;

					var X = temp_r * 0.4124 + temp_g * 0.3576 + temp_b * 0.1805;
					var Y = temp_r * 0.2126 + temp_g * 0.7152 + temp_b * 0.0722;
					var Z = temp_r * 0.0193 + temp_g * 0.1192 + temp_b * 0.9505;

					return [x,y,z];
				}

				rgbToXyz(start);

				//function to send one pixel at a time to rgbtoxyz function and rebuild into the new xyzimage data array

				


				//convert image data to lab values

				//sample top left pixel, and diff with delta e94 for each pixel


				//remove green from the original image
				
				var data = imageData.data;
				
				var start = data[0] + data[1] + data[2];

				var tolerance = 75;

				for (var i = 0, n=data.length; i < n; i += 4){

					var diff = Math.abs(data[i] - data[0]) + Math.abs(data[i+1] - data[1]) + Math.abs(data[i+2] - data[2]);
					if(diff < tolerance){
						data[i+3] = 0;
					}
				}
				
				ctx.putImageData(imageData, 0, 0);
				//upload filtered image
				uploadFilteredImage(canvas, ctx);
				//get image and rewrite canvas

			}

			img.src = '../images/uploads/#{photoid}';

			var uploadFilteredImage = function(canvas, ctx){
				$.ajax({
					type: 'POST',
					url: '../photo/transparent/#{photoid}',
					data: {
						imgBase64: canvas.toDataURL("image/jpg")
					}
				}).done(function(res){
					console.log('transparent file uploaded');
					redrawWithNewImage(canvas, ctx, res)
				})

				/*
				//initialize ajax request
				var xmlhttp = new XMLHttpRequest();
				
				//handle errors
				xmlhttp.onreadystatechange = function(){
				if ( xmlhttp.readyState == XMLHttpRequest.DONE ) {
					if (xmlhttp.status == 200){
						console.log('image upload succesful')
						} 
					else if ( xmlhttp.status == 400 ) {
						console.error('There was an error 400')
						}
					else {
						console.error('There was an unidentified error')
						}
					}
				}

				var image = canvas.toDataURL("image/png")
				//make request
				xmlhttp.open("POST", '/photo/transparent/#{photoid}', true);
				xmlhttp.setRequestHeader('Content-Type', 'application/blob; charset=UTF-8');
				xmlhttp.send('data='+image);
				*/
			}

			var redrawWithNewImage = function(canvas, ctx, newImage){
				ctx.putImageData(newImage, 0, 0)
			}

			$('.bg-image').click(function(){
				//this route needs to be replace with a regex so that you don't have to change it on every new computer
				//this is for development
				//var newImgSrc = $(this).css('background-image').replace('url(http://localhost:1111', '..').slice(0,-1);
				//this is for production
				var newImgSrc = $(this).css('background-image').replace('url(http://shanghaiappmaker.com:1111', '..').slice(0,-1);
				var canvas = document.getElementById('mainImage');
				var ctx = canvas.getContext('2d');
				img = new Image();
				img.src = newImgSrc;
				ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, 1200, 675);

				var img_trans = new Image();
				img_trans.src = '../images/trans/#{photoid}';
				ctx.drawImage(img_trans, 0, 0, img_trans.width, img_trans.height, 0, 0, 1200, 675);
			})

			var applyDefaultBackground = function(){

			}


			//apply other backgrounds to the canvas
			//this went into the custom.js file because I'm lazy and wanted to use jquery


			//export image from canvas
			//also in custom.js

			//send new image back to server and generate qr code

			